import React from "react";
type iconType = "user" | "email" | "lock" | ""
interface IProps {
    type:"text" | "password" | "submit"
    label:string
    value:string
    icon: iconType
    onChange:(label:string,value:string) => void
}
interface IState {
    value:string
}
export default class MyInput extends React.Component<IProps, IState> {
    static defaultProps = {
        label: "",
        type: "text",
        value: "",
        icon: "",
        onChange:()=>{}
    }
    constructor(props:IProps) {
        super(props);
        this.state = {
            value:props.value
        }
    }
    handleInput = (e:React.ChangeEvent<HTMLInputElement>) => {
        this.setState({value:e.target.value})
        this.props.onChange(this.props.label,e.target.value)
    }
    handleClick:React.MouseEventHandler = (e) => {
        this.props.onChange(this.props.label,this.state.value)
    }
    render() {
        const iconMap:Map<iconType,JSX.Element> = new Map([
            ["user",<i className="fa fa-user"/>],
            ["email",<i className="fa fa-envelope"/>],
            ["lock",<i className="fa fa-lock"/>],
        ])
        const hasLabel = this.props.label!== ""
        const hasIcon = this.props.icon !== ""
        return (
            <div className={"inputBox"}>
                <input onClick={this.handleClick} onChange={this.handleInput} type={this.props.type} value={this.state.value} required={true}/>
                {hasIcon && iconMap.get(this.props.icon)}
                {hasLabel && <span>{this.props.label}</span>}
            </div>
        );
    }
}
